<!-- 医护（医生护士专用，看到平台的全部会员分页列表） -->
<template>
	<view>
		<cu-custom bgColor="bg-E96141" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">医护中心</block>
		</cu-custom>
		
		<!-- 搜索栏 -->
		<view class="navbar" :style="{position:headerPosition}" style="height: 100px;">
			<view class="search-con">
				<input 
					class="input-keyword" 
					type="text" 
					:value="keyword"
					maxlength="20"
					data-key="keyword"
					@input="inputChange"
					placeholder="会员手机号"/>
				<text class="btn-search" @tap="handleSearch">
					<text class="yticon icon-sousuo"></text>搜索
				</text>
				<text class="btn-clear" @tap="handleClear">
					<text class="yticon icon-iconfontshanchu1"></text>清除
				</text>
			</view>
		 
			<view style="display: flex;justify-content: center;padding:10px;margin-top: -26upx;">
							  <view style="display:flex;justify-content:center;padding:14upx 5upx;width:100%;justify-content: center;align-items: center;">
							         <text  style="font-size: 26upx;margin-right: 20upx;width: 20%;">美丽医护</text> 
									<ep-select :disabled="false" v-model="select" :options="options" @change="change"></ep-select>
							  </view>
			</view>
		</view>
		<!-- 分页数据 -->
		<view class="space-line"></view>
		<view class="no-data-con"
			v-if="!pageDataList || pageDataList.length==0">
			<image src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/empty.png"></image>
			<view class="title">暂无会员资料~</view>
		</view>
		<!-- @scroll="onPageScroll()" -->
		<scroll-view 
			scroll-y 
			class="page-list-con"
			@scrolltolower="handleScrolltolower()">
			<view
				v-for="(item, index) in pageDataList" :key="item.id"
				class="one-row">
				<view class="left-con">
					<view class="head-img-con">
						<image
							class="head-img"
							src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/default-head.png"
							mode="aspectFill"></image>
					</view>
					<view class="opers">
						<button class="cu-btn bg-cyan round sm btn-1" @tap="toGeRenDangAn(item)">
							<text class="title">个人档案</text>
						</button>
						<button class="cu-btn bg-cyan round sm btn-3" @tap="toSingleMemberJkda(item)">
							<text class="title">健康档案</text>
						</button>
						<button class="cu-btn bg-cyan round sm btn-2" @tap="toChuFangJian(item)">
							<text class="title">处方笺</text>
						</button>
						<!-- <button class="cu-btn bg-cyan round sm btn-4" @tap="callPhone(item.phone)">
							<text class="title">拨打电话</text>
						</button> -->
						<button class="cu-btn bg-cyan round sm btn-4" @tap="copyInfo(item.phone)">
							<text class="title">复制电话</text>
						</button>
					</view>
					
				</view>
				<view class="right-con">
					<view class="title">
						<text class="account">{{item.phone}}</text>
						<text class="name">
							{{item.realname?item.realname:''}} {{item.sex=='1'?'[男]':''}}{{item.sex=='2'?'[女]':''}}
						</text>
					</view>
					<view class="person">
						<text class='cuIcon-list cyicon'></text>
						<!-- <text class="sex">{{item.sex_dictText}}</text> -->
						<text class="age">{{item.age>0?(item.age+'岁'):'年龄未知'}}</text>
						<text class="birthday">{{item.birthday?item.birthday:'生日未知'}}</text>
					</view>
					<view class="vip"
						v-if="item.isVip=='Y' || item.isVip=='y'">
						<text class='iconfont cyIcon-VIP cyicon'></text>
						<text class="vip-level">{{item.vipLevelTitle?item.vipLevelTitle:'非会员'}}</text>
						<text class='vip-time-range'>
							<text v-if="item.startTime && item.endtime">{{item.startTime}}至{{item.endtime}}</text>
							<text v-if="!item.startTime || !item.endtime">有效期未知</text>
						</text>
					</view>
					<view class="address">
						<text class='iconfont cyIcon-position cyicon'></text>
						<text class="detail">{{item.address?item.address:'住址未知'}}</text>
					</view>
					<view class="service">
						<text class="iconfont cyIcon-fuwujilu cyicon"></text>
						<text class="total-order-count">
							{{item.yuyuecount>0?('累计预约'+item.yuyuecount+'次'):'从未预约'}}
						</text>
					</view>
					<!-- <view class="remark">
						<text class="iconfont cyIcon-tubiao_beizhu cyicon"></text>
						{{item.remark?item.remark:'暂无备注'}}
					</view> -->
				</view>
			</view>
			
			<uni-load-more
				v-if="pageDataList && pageDataList.length>0"
				:status="loadingType"></uni-load-more>
		</scroll-view>
		
	</view>
</template>

<script>
	import {
		APP_MUST_PERMISSION_STATUS,
		USER_IDENTITY,
	} from "@/common/util/constants"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import mobilePermission from '@/common/util/wa-permission/permission.js'
	
	export default {
		name: "docterNurse",
		components: {
			uniLoadMore	
		},
		props:{
			pageCur: String,
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				pageDataList: [],
				
				keyword: '',
				currPageNo: 1,
				totalPageNo: 1,
				pageSize: 10,
			}
		},
		created() {
			/* uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			}); */
			this.getUserInfo()
			this.loadData();
		},
		methods: {
			// 用户信息
			getUserInfo(){
				this.userIdentity = uni.getStorageSync(USER_IDENTITY)
				if(this.userIdentity!='1' && this.userIdentity!='2'){
					this.$tip.toast('仅对医护人员开放');
					return false;
				}
			},
			//会员档案代编辑
			toGeRenDangAn(item){
				if(this.userIdentity!='1' && this.userIdentity!='2'){
					this.$tip.toast('仅对医护人员开放');
					return false;
				}
				if(!item){
					this.$tip.toast('数据异常，请刷新后重试')
					return false
				}
				let _params = '?nouse=1' + 
					'&id=' + item.id + 
					'&phone=' + (item.phone?item.phone:'') + 
					'&realname=' + (item.realname?item.realname:'')
				uni.navigateTo({
					url: '/pages/user/instead-member-edit' + _params
				})
			},
			//医护-查看某个会员的全部健康档案
			toSingleMemberJkda(item){
				if(this.userIdentity!='1' && this.userIdentity!='2'){
					this.$tip.toast('仅对医护人员开放');
					return false;
				}
				if(!item){
					this.$tip.toast('数据异常，请刷新后重试')
					return false
				}
				let _params = '?nouse=1' + 
					'&memId=' + item.id + 
					'&memPhone=' + (item.phone?item.phone:'') + 
					'&memRealname=' + (item.realname?item.realname:'') + 
					'&memSex=' + item.sex + 
					'&memBirthday=' + item.birthday + 
					'&memAddress' + item.address
				// {{item.sex=='1'?'[男]':''}}{{item.sex=='2'?'[女]':
				uni.navigateTo({
					url: '/pages/member-health-record/dn-single-member-see' + _params
				})
			},
			//处方笺
			toChuFangJian(item){
				if(!item){
					this.$tip.toast('数据异常，请刷新后重试')
					return false
				}
				if(this.userIdentity!='1' && this.userIdentity!='2'){
					this.$tip.toast('仅对医护人员开放');
					return false;
				}
				let _params = '?nouse=1' + 
					'&phone=' + (item.phone?item.phone:'')
				uni.navigateTo({
					//url: '/pages/user/instead-member-chu-fang-jian' + _params
					url: '/pages/chufang/chufanglist' +_params
				})
			},
			//拨打电话(弃用)
			/* async callPhone(phone){
				if(!phone || phone.length==0){
					return false
				}
				
				//允许程序从非系统拨号器里拨打电话
				let permissionIdStr = ''
				permissionIdStr = 'android.permission.CALL_PHONE'
				let per_call_phone = await mobilePermission.requestAndroidPermission(permissionIdStr)
				if(per_call_phone!=1){
					uni.setStorageSync(APP_MUST_PERMISSION_STATUS, '0')
					uni.redirectTo({
						url: '/pages/start-page/start-page'
					})
					return false
				}
				
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			}, */
			//复制电话
			copyInfo(phone){
				let that = this
				if(!phone){
					that.$tip.cyToast('复制失败')
					return false
				}
				uni.setClipboardData({
				    data: phone,
					showToast: false,
				    success: function () {
				        that.$tip.cyToast('会员电话复制成功')
				    }
				});
			},
			onPageScroll(e){
				//兼容iOS端下拉时顶部漂移
				//console.log('onPageScroll()')
				if(e.scrollTop>=0){
					this.headerPosition = "fixed";
				}else{
					this.headerPosition = "absolute";
				}
			},
			//下拉刷新
			onPullDownRefresh(){
				this.loadData('refresh');
			},
			//上拉触底事件
			handleScrolltolower(e) {
				if(this.loadingType=='more'){
					this.loadData()
				}
			},
			//搜索
			handleSearch(){
				this.pageDataList = []
				this.currPageNo = 1
				this.totalPageNo = 1
				this.loadingType = 'more'
				this.loadData()
			},
			//清除条件
			handleClear(){
				this.pageDataList = []
				this.currPageNo = 1
				this.totalPageNo = 1
				this.loadingType = 'more'
				this.keyword = ''
				this.loadData()
			},
			//关键字-文本框
			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				let that = this
				//没有更多直接返回
				if(type === 'add'){
					if(that.loadingType === 'nomore'){
						return;
					}
					that.loadingType = 'loading';
				}else if(type === 'refresh'){
					that.pageDataList = []
					that.currPageNo = 1
				}else{
					that.loadingType = 'more'
				}
				if(that.currPageNo>that.totalPageNo){
					that.loadingType = 'nomore'
					if(loading == 1){
						//uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
					return false
				}
				let _pageParams = {
					pageNo: that.currPageNo,
					pageSize: that.pageSize,
					keyword: that.keyword
				}
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				let list = await that.$http.get('/vip/vipmember/list', {params:_pageParams})
					.then(res => {
						if(res.data.success){
							uni.hideLoading()
							let jsonData = res.data.result
							if(!jsonData){
								return []
							}
							let _list = jsonData.records?jsonData.records:[]
							that.totalPageNo = jsonData.pages
							return _list
						}else{
							uni.hideLoading()
						}
					}).catch(err => {
						uni.hideLoading()
						return []
					});
				
				if(list && list.length>0){
					list.forEach(item=>{
						that.pageDataList.push(item)
					})
				}
				
				//判断是否还有下一页，有是more  没有是nomore
				that.loadingType  = (that.currPageNo >= that.totalPageNo)?'nomore':'more'
				if(type === 'refresh'){
					if(loading == 1){
						//uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
				
				if(that.currPageNo<that.totalPageNo){
					that.currPageNo++
				}
			},
			
			stopPrevent(){
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar{
		position: fixed;
		left: 0;
		// #ifdef APP-PLUS
		top: 78px;
		// #endif
		display: flex;
		width: 100%;
		/* height: 160upx; */
		height: 65px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		z-index: 10;
		flex-wrap: wrap;
		border: 0px solid #f00;
		.search-con{
			display: flex;
			width: 100%;
			padding: 20upx;
			.input-keyword{
				flex:1;
				height: 60upx;
				line-height: 60upx;
				padding: 0 16upx;
				color: #666666;
				border-radius: 100upx;
				border:1px solid #cccccc;
			}
			.btn-search{
				width: 120upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				padding: 0;
				margin-left: 16upx;
				color: #ffffff;
				background-color: #EA6040;
				border-radius: 40upx;
			}
			.btn-clear{
				width: 120upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				padding: 0;
				margin-left: 16upx;
				color: #ffff;
				background-color: #00bcd4;
				border-radius: 40upx;
			}
		}
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #999999;
			position: relative;
			&.current{
				color: #999999;
				padding-bottom: 16upx;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #999999;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: #999999;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}
	
	/* 分页列表 */
	.space-line{
		width: 100%;
		height: 65px;
	}
	.no-data-con{
		text-align: center;
		padding: 30% 0 0 0;
		image{
			width: 150px !important;
			height: 150px !important;
		}
		.title{
			color: #aaaaaa;
		}
	}
	.page-list-con{
		height: calc(77vh);
		display: block;
		clear: both;
		padding: 20upx;
		color: #999999;
		border: 0px solid #f00;
		.one-row{
			width: 100%;
			height: 400upx;
			overflow: hidden;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			padding: 20upx;
			border-radius: 10upx;
			border: 1px solid #ececec;
			.left-con{
				width: 25%;
				float: left;
				text-align: center;
				border: 0 solid #f00;
				.head-img{
					width: 48px !important;
					height: 48px !important;
					border-radius: 100px;
					margin-bottom: 10upx;
				}
				.opers{
					font-size: 40upx;
					text{
						font-size: 24upx;
					}
					.btn-1{
						width: 85%;
						background-color: #1CBBB4;
						height: 56upx;
						line-height: 56upx;
						margin-bottom: 10upx;
					}
					.btn-2{
						width: 85%;
						background-color: #03a9f4;
						height: 56upx;
						line-height: 56upx;
						margin-bottom: 10upx;
					}
					.btn-3{
						width: 85%;
						background-color: #ff9270;
						height: 56upx;
						line-height: 56upx;
						margin-bottom: 10upx;
					}
					.btn-4{
						width: 85%;
						background-color: #ff9800;
						height: 56upx;
						line-height: 56upx;
						margin-bottom: 10upx;
					}
				}
			}
			.right-con{
				width: 74%;
				float: right;
				border: 0 solid #f00;
				padding: 10upx;
				height: 360upx;
				overflow: hidden;
				.title{
					font-size: 32upx;
					font-weight: bold;
					margin-bottom: 10upx;
					height: 50upx;
					line-height: 50upx;
					.account{
						margin-right: 10upx;
						color: #1CBBB4;
					}
					.name{
						float: right;
						color: #EA6040;
					}
				}
				.person{
					margin-bottom: 10upx;
					.cyicon{
						margin-right: 10upx;
					}
					.sex{
						margin-right: 20upx;
					}
					.age{
						margin-right: 20upx;
					}
					.birthday{
						margin-right: 20upx;
					}
				}
				.vip{
					margin-bottom: 10upx;
					.cyicon{
						margin-right: 10upx;
					}
					.vip-level{
						margin-right: 16upx;
					}
					.vip-time-range{
						
					}
				}
				.address{
					margin-bottom: 10upx;
					.cyicon{
						margin-right: 10upx;
					}
					.detail{
						
					}
				}
				.service{
					margin-bottom: 10upx;
					.cyicon{
						margin-right: 10upx;
					}
					.total-order-count{
						
					}
				}
				.remark{
					margin-bottom: 10upx;
					.cyicon{
						margin-right: 10upx;
					}
					.detail{
						
					}
				}
			}
		}
		
	}
	

</style>
